<script setup lang="ts" >
import { onMounted, watch, ref } from 'vue';
import * as echarts from 'echarts';
import 'echarts-wordcloud';
onMounted(() => {
    productCategoryBar()
})
const props = defineProps({
    data: {
        type: Object,
        required: true,
    }

})
/**
 * 生成随机色值
 */
const randomRGB = () => {
    const r = Math.floor(Math.random() * 255)
    const g = Math.floor(Math.random() * 255)
    const b = Math.floor(Math.random() * 255)
    return `rgb(${r}, ${g}, ${b})`
}
const productCategoryBar = async () => {
    const pcb = echarts.init(document.getElementById('WordCloud'))
    pcb.setOption({
        series: [
            {
                // 类型
                type: 'wordCloud',
                // 数据映射文本的大小范围
                sizeRange: [2, 26],
                // 文字旋转范围
                rotationRange: [0, 0],
                // 单词之间的间距
                gridSize: 0,
                // 渲染动画
                layoutAnimation: true,
                // 字体
                textStyle: {
                    // 随机色值
                    color: randomRGB
                },
                // 高亮字体
                emphasis: {
                    textStyle: {
                        fontWeight: 'bold',
                        color: '#000'
                    }
                },
                // 数据
                data: props.data.datas
            }
        ]
    })
    window.addEventListener('resize', function () {
        pcb.resize()
    })
}
// 监听数据的变化，重新渲染图表,前面我们设置了定时器，3秒获得新数据
watch(
    () => props.data,
    () => {
        productCategoryBar()
    }
)
</script>

<template>
    <div>
        <div class="title">【词云】</div>
        <div ref="target" class="VerticalBar" id="WordCloud">
        </div>
    </div>
</template>

<style scoped lang="scss">
.title {
    color: rgb(220, 176, 73);
    margin-left: 4em;
   
}

.VerticalBar {
    width: 100%;
    height: 25vh;
}
</style>